<template>
  <el-dialog
    destroy-on-close
    :title="title"
    :visible.sync="isShow"
    @close="clear"
    width="80%"
  >
    <section class="dialog-body">
      <el-table :data="addDataList" border :show-header="false">
        <el-table-column
          v-for="(item, index) in 4"
          :key="item"
          :prop="`col${index}Title`"
          align="center"
        >
          <template slot-scope="scope">
            <template
              v-if="
                scope.row[`col${index}Title`] &&
                scope.row[`col${index}Title`].type
              "
            >
              <el-date-picker
                v-if="scope.row[`col${index}Title`].type === 'date'"
                v-model="scope.row[`col${index}Title`].value"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <el-input
                clearable
                v-if="scope.row[`col${index}Title`].type === 'text'"
                v-model="scope.row[`col${index}Title`].value"
                placeholder="请输入"
              >
              </el-input>

              <el-select
                v-if="scope.row[`col${index}Title`].type === 'subject'"
                v-model="scope.row[`col${index}Title`].value"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in subPejctOptions"
                  :key="scope.$index + '_' + index + item.code"
                  :label="item.text"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </template>
            <template v-else>
              {{ scope.row[`col${index}Title`] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clear">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import map from "@/components/map.js";
import { createRowData } from "./dataHelper";

const DEFAULT_TEXT = {
  type: "text",
  value: "",
};

function getInitData() {
  return [
        createRowData([
          "业务日期",
          {
            type: "date",
            key: "date",
            value: "",
          },
          "业务描述",
          {
            type: "text",
            value: "",
            key: "desc",
          },
        ]),
        createRowData(["借方科目", "借方金额", "发票凭证号", "借方对手方"]),
        ...Array.apply(null, { length: 3 }).map((v) =>
          createRowData([
            {
              type: "subject",
              subject: "borrow",
              value: "",
              key: "borrowSubjectCode",
            },
            {
              type: "text",
              value: "",
              key: "borrowAmount",
            },
            {
              type: "text",
              value: "",
              key: "borrowNo",
            },
            {
              type: "text",
              value: "",
              key: "borrowSide",
            },
          ])
        ),
        ,
        createRowData(["贷方科目", "贷方金额", "支付凭证号", "贷方对手方"]),
        ...Array.apply(null, { length: 3 }).map((v) =>
          createRowData([
            {
              type: "subject",
              subject: "loan",
              value: "",
              key: "loanSubjectCode",
            },
            {
              type: "text",
              value: "",
              key: "loanAmount",
            },
            {
              type: "text",
              value: "",
              key: "loanNo",
            },
            {
              type: "text",
              value: "",
              key: "loanSide",
            },
          ])
        ),
        ,
      ]
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    entryListLength: {
        type: Number,
        default: 1,
    }
  },
  data() {
    return {
      subPejctOptions: map.subjectsList,
      title: "添加分录",
      addDataList: getInitData(),
    };
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {},
    },
  },
  created() {
  },
  methods: {
    clear() {
      this.$emit("update:dialogVisible", false);
      setTimeout(() => {
        this.addDataList = getInitData();
      }, 100)
    },
    submit() {
      const { addDataList } = this;

      const [row0] = addDataList;

      if (!row0.col1Title.value) {
        return this.$message({
          message: "业务日期尚未填写",
          type: "warning",
        });
      }

      if (!row0.col3Title.value) {
        return this.$message({
          message: "业务描述尚未填写",
          type: "warning",
        });
      }

      const tableList = {
        no: this.entryListLength,
        date: row0.col1Title.value,
        itemList: [],
        desc: row0.col3Title.value
      };
      let list = [];
      addDataList.forEach((v, i) => {
        if (i !== 0 && i !== 1 && i !== 5) {
          let isNull = true;
          let obj = {};
          list = Object.keys(v).forEach((v2) => {
            
            if (v[v2].value) {
                isNull = false;
            }

            obj[v[v2].key] = v[v2].value
          });



          if(obj.borrowSubjectCode) {
             const item = map.subjectsList.find(v => v.code === obj.borrowSubjectCode);
             if (item) {
               obj.borrowSubject = item.text;
             }
          }
          if(obj.loanSubjectCode) {
             const item = map.subjectsList.find(v => v.code === obj.loanSubjectCode);
             if (item) {
               obj.loanSubject = item.text;
             }
          }
          if (!isNull) {
            tableList.itemList.push(obj);
          }
        }
      });

      console.log(4444, tableList)

        this.$emit('onAddEntry', [tableList]);
        this.clear();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/var.less";
.dialog-body {
  max-height: 500px;
  overflow: auto;
}
</style>
